<template>
    <el-dialog :title="cpShowTitle" :visible.sync="dialogVisible" :close-on-click-modal="false" @close="onClose">
        <div id="print-container" v-if="this.currentPrint && this.currentPrint.itemDescription1 && this.currentPrint.itemDescription1.length !== 0">
            <el-row type="flex" justify="center">
                <el-col :span="24" style="text-align: center;font-weight: bold;">
                    <p class="p">惠州华阳医疗器械有限公司</p>
                </el-col>
            </el-row>
            <el-row type="flex" justify="center">
                <el-col :span="24" style="text-align: center;font-weight: bold;">
                    <p>生产物料标识</p>
                </el-col>
            </el-row>
            <el-row type="flex" justify="center">
                <el-col :span="24" style="width:fit-content;font-size: 14px;">
                    <span>物料名称：</span><span class="underline">{{ currentPrint.itemDescription1 }}</span>
                    <span>物料编号：</span><span class="underline">{{ currentPrint.itemCode1 }}</span>
                </el-col>
            </el-row>
              <el-row type="flex" justify="center">
                <el-col :span="24" style="width:fit-content;font-size: 14px;">
                    <span>物料规格：</span><span class="underline">{{ currentPrint.itemSpecification1 }}</span>
                    <span>物料批号：</span><span class="underline"><input type="text" value="Y"></span>
                </el-col>
              </el-row>
              <el-row type="flex" justify="center">
                <el-col :span="24" style="width:fit-content;font-size: 14px;">
                    <span>实发数量：</span><span class="underline"><input type="text"></span>
                    <span>记录人员：</span><span class="underline"><input type="text" value="谭林"></span>
                </el-col>
              </el-row>
              <el-row type="flex" justify="center">
                <el-col :span="24" style="width:fit-content;font-size: 14px;">
                    <span>需求数量：</span><span class="underline">{{ currentPrint.requIncludeMultQty }}</span>
                    <span>发料时间：</span><span class="underline"><input type="text" v-model="currentTime"></span>
                </el-col>
              </el-row>
              <el-row type="flex" justify="center">
                <el-col :span="24" style="width:fit-content;font-size: 14px;">
                    <span>产品名称：</span><span class="underline">{{ currentPrint.itemDescription }}</span>
                    <span>生产批号：</span><span class="underline">{{ currentPrint.lotCode }}</span>
                </el-col>
              </el-row>


        </div>
        <div style="width:100%;text-align: center;">
            <el-button type="primary" @click="cancelDisabled=true" v-print="printObj"
                :disabled="okDisabled">打印</el-button>
            <el-button @click="onClose" :disabled="cancelDisabled">{{cancelText}}</el-button>
        </div>
    </el-dialog>
</template>

<script>
import print from 'vue-print-nb'
import VueQr from 'vue-qr';

export default {
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        printList: {
            type: Array,
            default: () => []
        }
    }
    , components: {
        VueQr
    }
    , directives: {
        print
    }
    , data() {
        return {
            dialogVisible: this.visible
            , printDataList: []
            , printIndex: 0
            , currentPrint: null
            , okDisabled: false
            , cancelDisabled: false
            , printObj: {
                id: 'print-container'
                , preview: false
                , popTitle:'print'
                ,openCallback(vue) {
                }
                ,closeCallback(vue) {
                    vue.printNext();
                }
            }
            , cancelText: '取消'
           , currentTime: ''
        }
    }
    , mounted() {
        this.dialogVisible = this.visible;
        this.printDataList = JSON.parse(JSON.stringify(this.printList));
        this.printIndex = 0;
        this.updatePrintContent();
        this.$modal.notify("在打印过程中请不要刷新或关闭此页面，以免造成打印或系统异常。");
        this.currentTime = this.formatDate(new Date());
    }
    , methods: {
        onClose() {
            this.dialogVisible = false;
            this.$emit('close');
        }
        , updatePrintContent() {
            this.currentPrint = this.printDataList[this.printIndex];
            this.printObj.popTitle = '打印：'+this.currentPrint.assetNo;
            this.printIndex++;
        }
        , printNext() {
            if (this.printIndex !== 0 && this.printDataList.length > 1 && this.printIndex < this.printDataList.length) {
                this.$modal.notify('准备打印第' + (this.printIndex + 1)
                    + '条数据。请点击下方【打印】按钮进行打印。');
                this.updatePrintContent();
            }else{
                this.printIndex = -1;
                this.okDisabled = true;
                this.cancelDisabled = false;
                this.cancelText = '关闭';
                this.$modal.alertPromise('打印已完成，点击确定关闭。').then(() => {
                    this.onClose();
                });
            }
        }, formatDate(date) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        }
    }
    ,computed: {
        // 计算属性cpShowTitle
       cpShowTitle() {
           let isOver = this.printIndex===-1;
           if(isOver){
               return '打印条码：完成';
           }
           if(this.printDataList.length===1){
                return '打印条码：单个';
           }
           return '打印条码：第' + (this.printIndex) + '条，共'+(this.printDataList.length)+'条';
       }
    }


}
</script>

<style scoped>
.print-tale {
    padding: 0;
    margin: 0;
}
p{
    margin-top: 5px;
    margin-bottom: 5px;
}
.underline {
        display: inline-block;
        text-align: center;
        overflow: hidden; /* 确保内容不超出容器 */
        /*height: 35px;  !* 设置固定高度 *!*/
        width: 135px; /* 设置固定长度 */
        border-bottom: 2px solid black; /* 设置下划线的样式 */

    }
    .el-row {
    margin-bottom: 15px; /* 可根据需要调整距离 */
}
input{
        text-align: center;
        width: 135px;
        font-size: 14px;
        border: 1px solid black; /* 设置边框颜色和宽度 */
        border-top:0px;
        border-left:0px;
        border-right:0px; /*把文本框的上边框、左边框、右边框都设置为0，只留下边框*/
        border-bottom:0px ;
    }

</style>
